<template>
    <!-- 新版的车牌管理--添加车牌页面 -->
    <view :class="uiStyle == 1 ? '' : 'uiStyle'">
		<view class="head-block" v-if="weixin == 2">
		     <view class="nav-title" :style="'top:10px'"></view>
			 <!-- 返回 -->
			 <view class="icon" @tap="goMy" :style="'top:6px'">
			      <van-icon name="arrow-left" color="#333" size="45rpx" />
			  </view>
		 </view>		
        <view class="title">请填写车牌号码</view>
        <view class="line"></view>

        <!-- 车牌号码输入框 -->
        <view :data-id="index" v-for="(item, idx) in plateNumbers" :key="item.i">
            <view class="carNumber">
                <!-- 车牌号头两位 -->
                <view class="carNumber-items">
                    <!-- 常规 -->
                    <view :class="'carNumber-item ' + (plate === idx && plateIndex === 0 ? 'active' : '')" :data-idx="idx" :data-index="0" @tap="openKeyboard">
                        {{ plateNumbers[idx][0] || '' }}
                    </view>
                    <view :class="'carNumber-item ' + (plate === idx && plateIndex === 1 ? 'active' : '')" :data-idx="idx" :data-index="1" @tap="openKeyboard">
                        {{ plateNumbers[idx][1] || '' }}
                    </view>
                    <view :class="'carNumber-item ' + (plate === idx && plateIndex === 2 ? 'active' : '')" :data-idx="idx" :data-index="2" @tap="openKeyboard">
                        {{ plateNumbers[idx][2] || '' }}
                    </view>
                    <view :class="'carNumber-item ' + (plate === idx && plateIndex === 3 ? 'active' : '')" :data-idx="idx" :data-index="3" @tap="openKeyboard">
                        {{ plateNumbers[idx][3] || '' }}
                    </view>
                    <view :class="'carNumber-item ' + (plate === idx && plateIndex === 4 ? 'active' : '')" :data-idx="idx" :data-index="4" @tap="openKeyboard">
                        {{ plateNumbers[idx][4] || '' }}
                    </view>
                    <view :class="'carNumber-item ' + (plate === idx && plateIndex === 5 ? 'active' : '')" :data-idx="idx" :data-index="5" @tap="openKeyboard">
                        {{ plateNumbers[idx][5] || '' }}
                    </view>
                    <view :class="'carNumber-item ' + (plate === idx && plateIndex === 6 ? 'active' : '')" :data-idx="idx" :data-index="6" @tap="openKeyboard">
                        {{ plateNumbers[idx][6] || '' }}
                    </view>
                    <!-- 新能源 -->
                    <view :class="'carNumber-item ' + (plateNumbers[idx][7] ? '' : 'carNumber-item-newpower')">
                        <view v-if="!plateNumbers[idx][7]" :data-idx="idx" :data-index="7" @tap="showPowerBtn">
                            <view class="carNumber-newpower-add">+</view>
                            <view>新能源</view>
                        </view>
                        <view v-if="plateNumbers[idx][7]" :data-idx="idx" :data-index="7" @tap="openKeyboard">
                            {{ plateNumbers[idx][7] }}
                        </view>
                    </view>
                    <!-- <view class="delete" data-idx="{{idx}}" bindtap='handleDelete'>
                  
                    <view style="font-size: 32rpx;color: #FF2300;">删除</view>
                </view> -->
                </view>
            </view>
        </view>
        <!-- 虚拟键盘 -->
        <view class="keyboard" v-if="KeyboardState">
            <view class="keyboardClose">
                <view class="keyboardClose_btn" @tap="closeKeyboard">关闭</view>
            </view>
            <!-- 省份简写键盘 -->
            <view class="keyboard-item" v-if="plateIndex === 0">
                <view class="keyboard-line" v-for="(item, index) in provinces" :key="index">
                    <view class="keyboard-btn" :data-val="itemlist" :data-plate="plate" @tap="bindChoose" v-for="(itemlist, index1) in item" :key="index1">
                        {{ itemlist }}
                    </view>
                </view>
                <view class="keyboard-del" @tap="bindDelChoose">
                    <van-icon name="cross" style="margin-top: 10rpx" />
                    <!-- <text class="font_family icon-shanchu keyboard-del-font"></text> -->
                </view>
            </view>
            <!-- 车牌号码选择键盘 -->
            <view class="keyboard-item iscarnumber" v-else>
                <view class="keyboard-line" v-for="(item, index) in numbers" :key="index">
                    <view class="keyboard-btn" :data-val="itemlist" :data-plate="plate" @tap="bindChoose" v-for="(itemlist, index1) in item" :key="index1">
                        {{ itemlist }}
                    </view>
                </view>
                <view class="keyboard-del" @tap="bindDelChoose">
                    <van-icon name="cross" />
                </view>
            </view>
        </view>

        <view class="fix-btm" :style="heightFlags == true ? 'bottom:420rpx;':''">
            <view class="btn" @tap="submitNumber">保存</view>
            <view class="tip-text">提示：暂时不支持临牌车辆</view>
        </view>
    </view>
</template>

<script>
// pages/addLicense/addLicense.js
import util from './../../utils/util.js';
import api from './../../utils/api.js';
export default {
    data() {
        return {
            // 省份简写
            provinces: [
                ['京', '沪', '粤', '津', '冀', '晋', '蒙', '辽', '吉', '黑'],
                ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
                ['桂', '琼', '渝', '川', '贵', '云', '藏'],
                ['陕', '甘', '青', '宁', '新']
            ],

            // 车牌输入
            numbers: [
                ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
                ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K'],
                ['L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V'],
                ['W', 'X', 'Y', 'Z', '港', '澳', '学']
            ],

            KeyboardState: false,
            plateNumbers: [['', '', '', '', '', '', '', '']],
            plate: 0,

            //第几个车牌
            plateIndex: -1,

            plateNos: '',

            //修改入参
            username: '',

            showNewPower: false,
            newLicense: '',
            phoneNumber: '',
			heightFlags:false,
			uiStyle:uni.getStorageSync('uiStyle') || 1,
			weixin:uni.getStorageSync('weixin')
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
		// this.uiStyle = uni.getStorageSync('uiStyle')
        this.getPersonInfoByIndentityId();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    // onShareAppMessage: function () {
    // }
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */ methods: {
        // 选中点击设置
        bindChoose(e) {
            var plate = this.plate;
            var index = this.plateIndex;
            var plateNumbers = this.plateNumbers;
            plateNumbers[plate][index] = e.target.dataset.val;
            this.setData({
                plateNumbers
            });

            if (index < 7) {
                index = index + 1;
                this.setData({
                    plateIndex: index
                });
            } else {
                this.setData({
                    KeyboardState: false,
					heightFlags:false,
                    plate: 0,
                    //第几个车牌
                    plateIndex: -1
                });
            }
        },

        bindDelChoose() {
            var plate = this.plate;
            var index = this.plateIndex;
            var plateNumbers = this.plateNumbers;

            if (index > 0) {
                index = index - 1;
                plateNumbers[plate][index] = '';
                this.setData({
                    plateNumbers
                });
                this.setData({
                    plateIndex: index
                });
            }
        },

        showPowerBtn() {
            this.setData({
                showNewPower: true,
                KeyboardState: true,
				heightFlags:true
            });
        },

        closeKeyboard() {
            this.setData({
                KeyboardState: false,
				heightFlags:false
            });
        },

        openKeyboard(e) {
            this.setData({
                KeyboardState: true,
				heightFlags:true,
                // plate: e.currentTarget.dataset.idx,
                plateIndex: e.currentTarget.dataset.index
            });
        },

        //添加车牌
        addCarnumber() {
            const plateNumberslength = this.plateNumbers.map((e) => e.join(''));

            for (let i = 0; i < plateNumberslength.length; i++) {
                if (plateNumberslength[i].length < 7) {
                    uni.showToast({
                        title: '请输入完整车牌',
                        icon: 'none'
                    });
                    return;
                }
            }

            let addItem = ['', '', '', '', '', '', '', ''];
            this.setData({
                plateNumbers: [...this.plateNumbers, addItem],
                KeyboardState: false,
				heightFlags:false
            });
        },
		goMy() {
		     uni.navigateBack({
		         delta: 1
		     });
		 },
        //删除车牌号
        handleDelete(e) {
            if (e.currentTarget.dataset.idx == 0) {
                uni.showToast({
                    title: '请输入车牌号',
                    icon: 'none'
                });
                return;
            }

            const index = e.currentTarget.dataset.idx;
            this.plateNumbers.splice(index, 1);
            this.setData({
                plateNumbers: this.plateNumbers
            });
        },

        // 点击保存  // 提交车牌号码
        submitNumber() {
            const that = this;
            const plateNumberslength = that.plateNumbers.map((e) => e.join(''));

            for (let i = 0; i < plateNumberslength.length; i++) {
                if (plateNumberslength[i].length < 7) {
                    uni.showToast({
                        title: '请输入完整车牌',
                        icon: 'none'
                    });
                    return;
                }
            }

            let newLicense = plateNumberslength;
            that.setData({
                newLicense: newLicense
            });
            this.addPlateNo();
        },

        // 提交修改
        addPlateNo() {
            var that = this;
            util.request(api.addPlateNo + '?plateNo=' + this.newLicense, 'get').then((res) => {
                if (res.code == 0) {
                    var _plateNos1 = [];
                    var _plateNos = '';

                    for (var i = 0; i < res.data.length; i++) {
                        _plateNos1.push(res.data[i].plateNo);
                    }

                    _plateNos = _plateNos1.join(',');
                    uni.setStorage({
                        key: 'plateNos',
                        data: _plateNos
                    }); //用户车牌号

                    uni.showToast({
                        title: '提交成功',
                        icon: 'none'
                    }); // 添加为了访客在加车牌后而跳转的逻辑：

                    if (uni.getStorageSync('visitor_code')) {
                        uni.redirectTo({
                            url: '../newBookpark/newBookpark?param=' + uni.getStorageSync('visitor_parkcode')
                        });
                    } else {
                        uni.navigateBack({
                            delta: 1
                        });
                    }
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    });
                }
            });
        },

        //获取个人资料
        getPersonInfoByIndentityId() {
            uni.hideLoading();
            let value = uni.getStorageSync('unionId');
            util.request(api.PersonInfoByIndentityId + '?personUnionId=' + value, 'get').then((res) => {
                if (res.code == 0) {
                    this.setData({
                        username: res.data.name || '',
                        phoneNumber: res.data.phoneNumber || '',
                        plateNos: res.data.plateNos || []
                    });
                }
            });
        }
    }
};
</script>
<style>
@import './addLicense.css';
</style>
